import { Component } from 'react';
import {  Group, Boxs, List } from 'saltui';
import Icon from 'salt-icon';
import Console from '../console/Console';
const { HBox, Box } = Boxs;


export default class Phone extends  React.Component  {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  handleClick(event, dataItem) {
    console.log(event);
    console.log(dataItem);
  }

  handleClickImg(event, imgUrl) {
    console.log(event);
    console.log(imgUrl);
  }

  handleDelete(event, dataItem) {
    console.log(event);
    console.log(dataItem);
  }

  render() {
    return (<div>
      <Group className="demo-t-list">
        <Group.Head className="t-demo-title">图加标题</Group.Head>
        <Group.List lineIndent={15}>
          <div>
            <div className="demo-t-list-wrap-single">
              <HBox vAlign="center">
                <HBox flex={1}>
                  <Box>
                    <img src="https://img.alicdn.com/tps/TB1S02rJFXXXXcuXpXXXXXXXXXX-58-58.png" className="demo-t-list-img" />
                  </Box>
                  <Box className="demo-t-list-text-content-single" flex={1}>
                    <p className="demo-t-list-title-single omit">手机通讯录</p>
                  </Box>
                </HBox>
                <Box>
                  <Icon name="angle-right" width={20} fill="#ccc" className="demo-t-list-arrow" />
                </Box>
              </HBox>
            </div>
          </div>
          <div>
            <div className="demo-t-list-wrap-single">
              <HBox vAlign="center">
                <HBox flex={1}>
                  <Box>
                    <img src="https://img.alicdn.com/tps/TB1eoLXJFXXXXaFXVXXXXXXXXXX-60-60.png" className="demo-t-list-img" />
                  </Box>
                  <Box className="demo-t-list-text-content-single" flex={1}>
                    <p className="demo-t-list-title-single omit">特别关注</p>
                  </Box>
                </HBox>
                <Box>
                  <Icon name="angle-right" width={20} fill="#ccc" className="demo-t-list-arrow" />
                </Box>
              </HBox>
            </div>
          </div>
        </Group.List>
      </Group>
      <Console history={this.props.history} activeIndex="1" />

    </div>);
  }
}

